<template>

  <div>
    <el-button v-if="showEdit" type="primary" @click="addProjectArea">新增</el-button>
    <el-row v-for="(item,index) in listValue" :key="index">
      <el-col :span="20">
        <span>{{ item.locationName }}</span>
        <span>（{{ item.locationArea + item.locationAddress }}）</span>
      </el-col>
      <el-col v-if="showEdit" :span="4">
        <el-button size="mini" type="link" @click="editProjectArea(item,index)">修改</el-button>
        <el-button size="mini" type="danger" @click="delProjectArea(item,index)">删除</el-button>
      </el-col>
    </el-row>
    <el-dialog :title="(this.dataForm.index!==undefined?'编辑':'新增')+'项目点'" append-to-body
               :visible.sync="locationDialog"
               width="30%"
               @close="dataForm={}"
               :close-on-click-modal="false">
      <el-form v-if="locationDialog" :model="dataForm" ref="dataForm" label-width="120px" size="small">
        <el-form-item label="项目点名称:" prop="locationName">
          <el-input v-model="dataForm.locationName" placeholder="请输入项目点名称" maxlength="15" show-word-limit
                    clearable></el-input>
        </el-form-item>

        <el-form-item label="项目点地址:" prop="corporationId">
          <el-cascader
            placeholder="省市区"
            :options="localMap"
            v-model="dataForm.selectedOptions">
          </el-cascader>
          <el-input v-model="dataForm.locationAddress" placeholder="详细地址" maxlength="50" show-word-limit
                    clearable></el-input>
        </el-form-item>

        <el-form-item style="margin-top: 10px" label-width="130px">
          <el-button type="" @click="close">
            取消
          </el-button>
          <el-button type="primary" @click="submit">
            <fa-icon class="fa-check"/>
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>

import localMap from '../js/localMap.json'
import api from '../api'
import {CONSTANT_OBJ} from '@/utils/constant'
import {getCookie} from '@/utils/util'

export default {
  name: 'ProjectArea',
  components: {},
  props: {
    value: Array, productId: String,
    showEdit: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  data () {
    return {
      localMap,
      locationDialog: false,
      corporationList: [],
      rules: [{}],
      listValue: [],
      dataForm: {
        projectId: '',
        locationName: '',
        selectedOptions: [],
        locationArea: '',
        locationAddress: '',
      }
    }
  },
  watch: {
    value: {
      handler (val) {
        console.log('value', val)
        this.$nextTick(() => {
          this.listValue = [...val]
        })
      },
      deep: true
    },
  },
  mounted () {
    this.listValue = [...this.value]
  },
  methods: {
    addProjectArea () {
      this.locationDialog = true
    },
    close () {
      this.locationDialog = false
    },
    submit () {
      this.setLocationArea()
      let changeValue = []
      if (this.dataForm.index === undefined) {
        changeValue = this.addProject()
      } else {
        changeValue = this.editProject()
      }

    },
    editProject () {
      let productId = this.productId
      if (productId) {
        api.editProjectLocation({tenantId: getCookie('tenantId'), productId, ...this.dataForm}).then(res => {
          const {responseCode, responseMsg} = res
          if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
            this.$message({
              message: `${responseMsg}`,
              type: 'success'
            })
            this.locationDialog = false
          }
        })
      } else {
        this.locationDialog = false
      }
      let changeValue = this.listValue.map((k, i) => {
        console.log('i', k, i)
        if (i === this.dataForm.index) {
          return this.dataForm
        }
        return k
      })
      this.dataForm = {}
      this.$emit('change', changeValue)
      return changeValue
    },
    addProject () {
      let productId = this.productId
      if (productId) {
        api.addProjectLocation({tenantId: getCookie('tenantId'), productId, ...this.dataForm}).then(res => {
          const {responseCode, responseMsg, data} = res
          if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
            this.$message({
              message: `${responseMsg}`,
              type: 'success'
            })
            this.dataForm.projectId = data.projectId
            let changeValue = [...this.listValue, this.dataForm]
            this.dataForm = {}
            this.$emit('change', changeValue)
            this.locationDialog = false
          } else {
            this.locationDialog = false
          }
        })
      } else {
        this.locationDialog = false
        let changeValue = [...this.listValue, this.dataForm]
        this.dataForm = {}
        this.$emit('change', changeValue)
      }

    },
    setLocationArea () {
      this.dataForm.locationArea = this.dataForm.selectedOptions.join('-')
    },
    setSelectedOptions () {
      this.dataForm.selectedOptions = this.dataForm.locationArea.split('-')
    },
    delProjectArea (item, index) {
      let productId = this.productId
      console.log('delProjectArea', item, index)
      if (productId) {
        api.delProjectLocation(item.projectId).then(res => {
          const {responseCode, responseMsg} = res
          if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
            this.$message({
              message: `${responseMsg}`,
              type: 'success'
            })
          }
        })
      }
      let changeValue = [...this.listValue].filter((k, i) => i !== index)
      this.$emit('change', changeValue)
    },
    editProjectArea (item, index) {
      this.dataForm = {...this.listValue[index], index}
      this.locationDialog = true
    }
  }
}

</script>
<style scoped lang="less">

</style>
